.at-Row--instances {
    .at-Row-content {
        flex-wrap: nowrap;
    }

    .at-Row-toggle {
        align-self: auto;
        flex: initial;
    }

    .at-Row-itemGroup {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
    }

    .at-Row-items--instances {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        flex: 1;
    }

    .at-RowItem--isHeader {
        min-width: 250px;
    }

    .at-Row-items--capacity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .CapacityAdjuster {
        padding-bottom: 15px;
    }
}

.at-Row--instanceGroups {
    .at-Row-content {
        flex-wrap: nowrap;
    }

    .at-Row-itemGroup {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
    }

    .at-Row-items--instanceGroups {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex: 1;
        max-width: 100%;
    }

    .at-Row-itemHeaderGroup {
        min-width: 320px;
        display: flex;
    }

    .at-Row-items--capacity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-right: 5px;
        min-width: 215px;
    }

    .at-Row--instanceSpacer {
        width: 140px;
    }

    .at-Row--capacitySpacer {
        flex: .6;
    }

    .at-Row-actions {
        min-width: 50px;
    }
}

@media screen and (max-width: 1260px) {
    .at-Row--instances .at-Row-items--capacity {
        flex: 1
    }

    .at-Row--instances .CapacityAdjuster {
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 600px) {
    .at-Row--instanceGroups .at-Row-itemHeaderGroup,
    .at-Row--instanceGroups .at-Row-itemGroup {
        max-width: 270px;
    }
}
